CSS animatie - keyframes

Beschrijving

Een enkel keyframe definieert een punt tijdens de animatie waarvoor een toestand bekend is, bijvoorbeeld:

• op 0% voltooid, de achtergrondkleur is blauw
• op 50% voltooid, de achtergrondkleur is groen op
• 100% voltooid, de achtergrondkleur is rood

Elke @keyframes bestaat uit:

1. een naam die de animatie beschrijft bijvoorbeeld stuiteren;
2. de stadia van de animatie; elk stadium van de animatie wordt weergegeven als een percentage. 0% betekent de begin toestand van de animatie, 100% betekent het eindstadium van de animatie;
3. Meerdere tussentoestanden kan worden toegevoegd tussen.
4. CSS stijlregel waarin je met CSS-eigenschappen elk stadium van van de animatie-tijdlijn kan definiëren;

Het @keyframes bestaat uit vijf fasen. In de eerste fase (0%), wordt het element geschaald op een 1/3 en ondoorzichtig gemaakt. In de tweede fase (25%) wordt het element geschaald op een 1/7 en half doorzichtig gemaakt. In de derde fase (50%) wordt het element op zijn natuurlijke grootte geschaald en is de dekking ervan volledig. In de vierde fase wordt teruggekeerd naar fase 2 en in de vijfde en laatste fase wordt de eerste fase herhaald.

@keyframes scaleIn {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: scale(.3);
    opacity: 0;
    transform: scale(.3);
  }
  25% {
    -webkit-opacity: 0.5;
    -webkit-transform: scale(.7);
    opacity: 0.5;
    transform: scale(.7);
  }
  50% {
    -webkit-opacity: 1;
    -webkit-transform: scale(1);
    opacity: 1;
    transform: scale(1);
  }
75% {
    -webkit-opacity: 0.5;
    -webkit-transform: scale(.7);
    opacity: 0.5;
    transform: scale(.7);
  } 
  100% {
    -webkit-opacity: 0;
    -webkit-transform: scale(.3);
    opacity: 0;
    transform: scale(.3);
  } 
}

In het voorbeeld hieronder gebruiken we ook al animatie eigenschappen alhoewel we die nog niet gezien hebben. Concentreer je nu op het @keyframes gedeelte.

Alleen CSS eigenschappen met discrete waarden kunnen tussen keyframes veranderen. O.a. eigenschappen van de lay-out (breedte, hoogte, opvulling, marges, borders), positionele eigenschappen (links, rechts, boven, onder), transformaties, tekengrootten, kleuren, achtergrondkleuren en opaciteit.

Eigenschappen, die gebruik maken van een combinatie sleutelwoord-waarde zoals display: none; visibility: hidden; or height: auto; kunnen niet geanimeerd worden.

Bronnen

• CSS3 Animation Property Basics
• Vincent Tantardini, Playing with CSS3 Animations, 28/03/2014
• Joni Trythall, Responsive CSS Keyframe Animations, March 20, 2014